<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<link rel="stylesheet" type="text/css" href="<c:url value="/static/css/multi-select-metro.css"/>" />

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">用户管理</h3>
			<ul class="breadcrumb">
				<li>
					<i class="icon-home"></i>
					<a href="<c:url value="/home.html"/>">首页</a> 
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="<c:url value="/member/list.html"/>">用户管理</a>
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="#">修改用户</a>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box blue">
				<div class="portlet-title">
					<div class="caption"><i class="icon-bookmark"></i> 修改用户</div>
				</div>
				<div class="portlet-body form">
				
					<form id="member-form" action="<c:url value="/member/${member.id}/update.html"/>" method="post" class="form-horizontal">
						<c:choose>
							<c:when test="${messageError!=null }">
								<div class="alert alert-error"><strong>错误!</strong> ${messageError }</div>
							</c:when>
							<c:otherwise>
								<div class="alert alert-error hide">请检查下面的错误</div>
							</c:otherwise>
						</c:choose>
					
						<div class="control-group">
							<label class="control-label">用户名:</label>
							<div class="controls">
								<span class="label label-info" style="line-height: 20px;padding:6px;">${member.username }</span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">姓名:</label>
							<div class="controls">
								<input type="text" name="member.realName" value="${member.realName }" class="m-wrap large">
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">邮箱:</label>
							<div class="controls">
								<input type="text" name="member.email" value="${member.email}" class="m-wrap large">
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">电话:</label>
							<div class="controls">
								<input type="text" name="member.tel" value="${member.tel}" class="m-wrap large">
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">状态:</label>
							<div class="controls">
								<select name="member.status" class="large m-wrap">
									<option value="ACT" <c:if test="${member.status == 'ACT'}">selected="selected"</c:if> >激活</option>
									<option value="LCK" <c:if test="${member.status == 'LCK'}">selected="selected"</c:if> >锁定</option>
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">部门:</label>
							<div class="controls">
								<select name="member.departmentCode" class="large m-wrap">
									<option value="" selected="selected">请选择...</option>
									<c:forEach items="${depts}" var="dept">
										<option value="${dept.departmentCode}" <c:if test="${member.departmentCode eq dept.departmentCode }">selected="selected"</c:if> >${dept.departmentName}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">角色:</label>
							<div class="controls">
								<select name="roleId" id="role-multiple" class="large m-wrap" multiple="multiple">
									<c:forEach items="${roleMap }" var="map">
										<c:forEach items="${map.value }" var="r">
											<option value="${r.id }" <c:if test="${r.isSelected }">selected="selected"</c:if> >${r.name }</option>
										</c:forEach>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-actions">
							<button class="btn blue" type="submit"><i class="icon-ok"></i> 保存</button>
							<a href="<c:url value="/member/list.html"/>" class="btn black" type="button"><i class="icon-share-alt"></i> 返回</a>
						</div>
					</form>
					
				</div>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript" src="<c:url value="/static/js/jquery.multi-select.js"/>"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#role-multiple").multiSelect({
        selectableOptgroup: true
    }); 
	
	var form = $("#member-form");
    var error = $(".alert-error", form);
    
    $.validator.addMethod("notAllNum",function(value,attributes,param){
		var reg = /[^0-9]+/;
		return reg.test(value);
	});
	
    form.validate({
		errorElement : "span",
		errorClass: "help-inline",
		rules: {
			"role.id": "required",
			"member.realName" :{required:true,notAllNum:true},
			"member.tel" :{
				required:true,digits:true,rangelength:[7,11]
			},
			"email": {
				email: true
			}
		},
		messages: {
			"role.id": {
				required: "请选择角色",
			},
			"member.realName" :{
				required:"请输入用户真实姓名",
				notAllNum:"不能为纯数字"
			},
			"member.tel" :{
				required:"请输入用户联系电话",
				digits:"请输入正确的电话号",
				rangelength:"电话号只能为7至11位"
			},
			"email": {
				email: "邮件格式不正确"
			}
		},
		invalidHandler: function (event, validator) { //display error alert on form submit              
            error.show();
            App.scrollTo(error, -200);
        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest(".help-inline").removeClass("ok"); // display OK icon
            $(element).closest(".control-group").removeClass("success").addClass("error"); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest(".control-group").removeClass("error"); // set error class to the control group
        },
        success: function (label) {
            label.addClass("valid").addClass("help-inline ok").closest(".control-group").removeClass("error").addClass("success"); // set success class to the control group
        },
        submitHandler: function (form) {
            form.submit();
        }
	});
	
});
</script>
